<template>
    <!--地图挂载dom-->
    <div id="map">
        <div id="info" ref="info">&nbsp;</div>
    </div>
</template>

<script>
    //引入依赖
    import GeoJSON from 'ol/format/GeoJSON';
    import Map from 'ol/Map';
    import VectorImageLayer from 'ol/layer/VectorImage';
    import VectorLayer from 'ol/layer/Vector';
    import VectorSource from 'ol/source/Vector';
    import View from 'ol/View';
    import {Fill, Stroke, Style, Text} from 'ol/style';

    const style = new Style({
        fill: new Fill({
            color: 'rgba(255, 255, 255, 0.6)',
        }),
        stroke: new Stroke({
            color: '#319FD3',
            width: 1,
        }),
        text: new Text(),
    });
    let highlight, featureOverlay;
    export default {
        name: "VectorFormatLayer",
        mounted() {
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    // 使用VectorImage类创建矢量影像图层
                    new VectorImageLayer({
                        imageRatio: 2,
                        source: new VectorSource({
                            url: 'http://localhost:8888/openlayer/geojson/china-full.json',
                            format: new GeoJSON(),//指定数据读取格式
                        }),
                        style: function (feature) {//指定样式函数
                            style.getText().setText(feature.get('name'));
                            return style;
                        },
                    }),
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 4   //缩放到的级别
                })
            });
            //设置矢量图层的高亮
            featureOverlay = new VectorLayer({
                source: new VectorSource(),
                map: this.map,
                style: new Style({
                    stroke: new Stroke({
                        color: '#f00',
                        width: 1,
                    }),
                    fill: new Fill({
                        color: 'rgba(255,0,0,0.1)',
                    }),
                }),
            });
            //地图鼠标移动事件
            this.map.on('pointermove', (evt) => {
                if (!evt.dragging) {
                    //没有拖拽地图触发，将鼠标事件的像素值传入
                    this.displayFeatureInfo(evt.pixel);
                }
            });
            this.map.on('click', (evt) => {
                //地图点击触发函数，将鼠标事件的像素值传入
                this.displayFeatureInfo(evt.pixel);
            });
        },
        methods: {
            displayFeatureInfo(pixel) {
                this.map
                    .getLayers()
                    .item(0)
                    .getFeatures(pixel)//通过像素值，获取到当前像素下所有的要素
                    .then((features) => {
                        const feature = features.length > 0 ? features[0] : undefined;
                        const info = this.$refs.info;
                        if (feature) {
                            //获取到的要素的名称渲染到，屏幕左上角
                            info.innerHTML = feature.get('name');
                        } else {
                            info.innerHTML = '&nbsp;';
                        }

                        //没有高亮的要素就要恢复之前的效果
                        if (feature !== highlight) {
                            if (highlight) {
                                featureOverlay.getSource().removeFeature(highlight);
                            }
                            if (feature) {
                                featureOverlay.getSource().addFeature(feature);
                            }
                            highlight = feature;
                        }
                    });
            }
        }
    }
</script>

<style scoped>

</style>